<template>
  <div :class="groupClass">
    <slot />
  </div>
</template>

<script>
import { computed } from 'vue';
// import { GlobalUtilsMixin } from '@/utils/globalUtils';

export default {
  name: 'AxiomGroup',
  // mixins: [GlobalUtilsMixin],
  props: {
    direction: {
      type: String,
      default: 'horizontal',
      validator: value => ['horizontal', 'vertical', 'grid'].includes(value)
    },
    gap: {
      type: String,
      default: 'normal',
      validator: value => ['none', 'small', 'normal', 'large', 'xlarge'].includes(value)
    },
    align: {
      type: String,
      default: 'stretch',
      validator: value => ['start', 'center', 'end', 'stretch', 'baseline'].includes(value)
    },
    justify: {
      type: String,
      default: 'start',
      validator: value => ['start', 'center', 'end', 'space-between', 'space-around', 'space-evenly'].includes(value)
    },
    wrap: {
      type: Boolean,
      default: false
    },
    columns: {
      type: [Number, String],
      default: 'auto'
    },
    responsive: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    groupClass() {
      return [
        'axiom-group',
        `axiom-group--${this.direction}`,
        `axiom-group--gap-${this.gap}`,
        `axiom-group--align-${this.align}`,
        `axiom-group--justify-${this.justify}`,
        {
          'axiom-group--wrap': this.wrap,
          'axiom-group--responsive': this.responsive && this.direction === 'grid'
        }
      ]
    },
    gridColumns() {
      if (this.direction === 'grid') {
        return typeof this.columns === 'number' 
          ? `repeat(${this.columns}, 1fr)` 
          : this.columns
      }
      return null
    }
  },
  created() {
    // this.$logger.debug('AxiomGroup 组件初始化', {
    //   direction: this.direction,
    //   gap: this.gap,
    //   align: this.align,
    //   justify: this.justify,
    //   wrap: this.wrap,
    //   columns: this.columns
    // });
  }
}
</script>

<style lang="scss">
@use '../../styles/components/common/axiom-group';
</style> 